<template>
	<view class="detail-container">
		<!-- 商品轮播图 -->
		<view class="swiper-box">
			<u-swiper :list="product.images" mode="dot" height="750rpx" indicator-pos="bottomCenter"></u-swiper>
		</view>

		<!-- 商品信息 -->
		<view class="product-info">
			<view class="price-box">
				<text class="price">¥{{ product.price }}</text>
				<text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
			</view>
			<view class="title-box">
				<text class="title">{{ product.name }}</text>
			</view>
			<view class="sales-box">
				<text class="sales">销量 {{ product.sales }}件</text>
			</view>
		</view>

		<!-- 规格选择 -->
		<!-- <view class="spec-box" @click="openSpecPopup">
			<text class="spec-title">规格</text>
			<view class="spec-right">
				<text class="spec-value">{{ selectedSpec || '请选择规格' }}</text>
				<u-icon name="arrow-right" size="24" color="#C0C4CC"></u-icon>
			</view>
		</view> -->

		<!-- 商品详情 -->
		<view class="detail-box">
			<view class="detail-title">
				<text>商品详情</text>
			</view>
			<view class="detail-content">
				<rich-text :nodes="product.detail"></rich-text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="bar-left">
				<view class="icon-item" @click="goToHome">
					<u-icon name="home" size="40rpx" color="#606266"></u-icon>
					<text>首页</text>
				</view>
				<view class="icon-item" @click="goToCart">
					<u-icon name="shopping-cart" size="40rpx" color="#606266"></u-icon>
					<text>购物车</text>
					<u-badge :count="cartCount" :offset="[0, -10]" v-if="cartCount > 0"></u-badge>
				</view>
			</view>
			<view class="bar-right">
				<view class="add-cart-btn" @click="addToCart">加入购物车</view>
				<view class="buy-now-btn" @click="buyNow">立即购买</view>
			</view>
		</view>

		<!-- 规格选择弹窗 -->
		<u-popup :show="specPopupVisible" mode="bottom" @close="closeSpecPopup">
			<view class="spec-popup">
				<view class="popup-header">
					<view class="product-preview">
						<u-image width="160rpx" height="160rpx" :src="product.images[0]"></u-image>
						<view class="preview-info">
							<text class="preview-price">¥{{ product.price }}</text>
							<text class="preview-spec" v-if="selectedSpec">已选：{{ selectedSpec }}</text>
						</view>
					</view>
					<view class="close-btn" @click="closeSpecPopup">
						<u-icon name="close" size="24" color="#909399"></u-icon>
					</view>
				</view>

				<view class="popup-content">
					<!-- <view class="spec-group">
						<view class="spec-group-title">规格</view>
						<view class="spec-items">
							<view class="spec-item" v-for="(item, index) in product.specs" :key="index"
								:class="{ active: selectedSpecIndex === index }" @click="selectSpec(index, item)">
								<text>{{ item }}</text>
							</view>
						</view>
					</view> -->

					<view class="quantity-box">
						<text class="quantity-title">数量</text>
						<u-number-box v-model="quantity" :min="1" :max="99"></u-number-box>
					</view>
				</view>

				<view class="popup-footer">
					<view class="popup-btn add-cart-btn" @click="confirmAddToCart">加入购物车</view>
					<view class="popup-btn buy-now-btn" @click="confirmBuyNow">立即购买</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productId: null,
				product: {
					id: 0,
					name: '',
					price: 0,
					originalPrice: 0,
					sales: 0,
					images: [],
					specs: [],
					detail: ''
				},
				selectedSpec: '',
				selectedSpecIndex: -1,
				quantity: 1,
				specPopupVisible: false,
				cartCount: 0
			}
		},
		onLoad(options) {
			if (options.id) {
				this.productId = options.id;
				this.loadProductDetail();
			}

			// 获取购物车数量
			this.getCartCount();
		},
		methods: {
			loadProductDetail() {
				// 模拟获取商品详情数据
				// 实际应用中应该从服务器获取
				setTimeout(() => {
					this.product = {
						id: this.productId,
						name: '商品详情 - ' + this.productId,
						price: 199.9,
						originalPrice: 299.9,
						sales: 1000,
						images: [
							'/static/product/product1.jpg',
							'/static/product/product2.jpg',
							'/static/product/product3.jpg'
						],
						specs: ['黑色', '白色', '蓝色', '红色'],
						detail: '<p style="text-align:center;"><img src="/static/product/detail1.jpg" style="max-width:100%;"></p><p style="text-align:center;"><img src="/static/product/detail2.jpg" style="max-width:100%;"></p>'
					};
				}, 500);
			},
			openSpecPopup() {
				this.specPopupVisible = true;
			},
			closeSpecPopup() {
				this.specPopupVisible = false;
			},
			selectSpec(index, spec) {
				this.selectedSpecIndex = index;
				this.selectedSpec = spec;
			},
			addToCart() {
				if (!this.selectedSpec) {
					this.openSpecPopup();
					return;
				}

				this.confirmAddToCart();
			},
			confirmAddToCart() {
				if (!this.selectedSpec) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
					return;
				}

				// 模拟添加到购物车
				uni.showLoading({
					title: '添加中...'
				});

				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '添加成功'
					});

					this.cartCount++;
					this.closeSpecPopup();

					// 实际应用中应该将商品信息存储到本地或发送到服务器
					const cartItem = {
						id: this.product.id,
						name: this.product.name,
						price: this.product.price,
						image: this.product.images[0],
						spec: this.selectedSpec,
						quantity: this.quantity
					};

					// 保存到本地存储
					this.saveToCart(cartItem);
				}, 500);
			},
			saveToCart(item) {
				// 获取现有购物车数据
				let cartList = uni.getStorageSync('cartList') || [];
				if (typeof cartList === 'string') {
					cartList = JSON.parse(cartList);
				}

				// 检查是否已存在相同商品和规格
				const index = cartList.findIndex(cart =>
					cart.id === item.id && cart.spec === item.spec
				);

				if (index !== -1) {
					// 已存在，增加数量
					cartList[index].quantity += item.quantity;
				} else {
					// 不存在，添加新项
					cartList.push(item);
				}

				// 保存回本地存储
				uni.setStorageSync('cartList', JSON.stringify(cartList));
			},
			buyNow() {
				if (!this.selectedSpec) {
					this.openSpecPopup();
					return;
				}

				this.confirmBuyNow();
			},
			confirmBuyNow() {
				if (!this.selectedSpec) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
					return;
				}

				// 跳转到订单确认页面
				uni.navigateTo({
					url: '/pages/order/confirm'
				});

				this.closeSpecPopup();
			},
			getCartCount() {
				// 获取购物车数量
				const cartList = uni.getStorageSync('cartList');
				if (cartList) {
					try {
						const list = JSON.parse(cartList);
						this.cartCount = list.reduce((total, item) => total + item.quantity, 0);
					} catch (e) {
						this.cartCount = 0;
					}
				}
			},
			goToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			goToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			}
		},
		// 分享功能
		onShareAppMessage() {
			return {
				title: this.product.name,
				path: `/pages/product/detail?id=${this.productId}`
			};
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container {
		padding-bottom: 100rpx;
		background-color: #f8f8f8;

		.swiper-box {
			width: 100%;
			height: 750rpx;
		}

		.product-info {
			background-color: #ffffff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.price-box {
				margin-bottom: 20rpx;

				.price {
					font-size: 40rpx;
					color: #fa3534;
					font-weight: bold;
					margin-right: 20rpx;
				}

				.original-price {
					font-size: 28rpx;
					color: #909399;
					text-decoration: line-through;
				}
			}

			.title-box {
				margin-bottom: 20rpx;

				.title {
					font-size: 32rpx;
					color: #303133;
					line-height: 1.5;
				}
			}

			.sales-box {
				.sales {
					font-size: 24rpx;
					color: #909399;
				}
			}
		}

		.spec-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.spec-title {
				font-size: 28rpx;
				color: #606266;
			}

			.spec-right {
				display: flex;
				align-items: center;

				.spec-value {
					font-size: 28rpx;
					color: #303133;
					margin-right: 10rpx;
				}
			}
		}

		.detail-box {
			background-color: #ffffff;

			.detail-title {
				padding: 30rpx;
				border-bottom: 1rpx solid #f2f2f2;

				text {
					font-size: 32rpx;
					font-weight: bold;
					color: #303133;
				}
			}

			.detail-content {
				padding: 30rpx;
			}
		}

		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background-color: #ffffff;
			display: flex;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

			.bar-left {
				display: flex;
				width: 35%;

				.icon-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					text {
						font-size: 20rpx;
						color: #606266;
						margin-top: 5rpx;
					}
				}
			}

			.bar-right {
				display: flex;
				width: 65%;

				.add-cart-btn,
				.buy-now-btn {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #ffffff;
				}

				.add-cart-btn {
					background-color: #ff9900;
				}

				.buy-now-btn {
					background-color: #fa3534;
				}
			}
		}

		.spec-popup {
			background-color: #ffffff;
			border-radius: 20rpx 20rpx 0 0;
			padding-bottom: env(safe-area-inset-bottom);

			.popup-header {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f2f2f2;

				.product-preview {
					display: flex;

					.preview-info {
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.preview-price {
							font-size: 32rpx;
							color: #fa3534;
							font-weight: bold;
							margin-bottom: 10rpx;
						}

						.preview-spec {
							font-size: 24rpx;
							color: #909399;
						}
					}
				}

				.close-btn {
					padding: 10rpx;
				}
			}

			.popup-content {
				padding: 30rpx;

				.spec-group {
					margin-bottom: 30rpx;

					.spec-group-title {
						font-size: 28rpx;
						color: #606266;
						margin-bottom: 20rpx;
					}

					.spec-items {
						display: flex;
						flex-wrap: wrap;

						.spec-item {
							padding: 10rpx 30rpx;
							background-color: #f5f5f5;
							border-radius: 30rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;

							text {
								font-size: 24rpx;
								color: #606266;
							}

							&.active {
								background-color: #f0f8ff;
								border: 1rpx solid #306EF6;

								text {
									color: #306EF6;
								}
							}
						}
					}
				}

				.quantity-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.quantity-title {
						font-size: 28rpx;
						color: #606266;
					}
				}
			}

			.popup-footer {
				display: flex;
				height: 100rpx;

				.popup-btn {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #ffffff;
				}

				.add-cart-btn {
					background-color: #ff9900;
				}

				.buy-now-btn {
					background-color: #fa3534;
				}
			}
		}
	}
</style>